<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    color
</body>
<script type="text/javascript">
// 第一种 a.length + 1 = colors.length;
const list_1 = [10, 20, 30];
const colors_1 = ['red', 'blue', 'green', 'white'];
// 第二种 a.length + 1 > colors.length;
const list_2 = [10, 20, 30, 40, 50];
const colors_2 = ['red', 'blue', 'green', 'white'];
// 第三种 a.length + 1 < colors.length;
const list_3 = [10, 20, 30];
const colors_3 = ['red', 'blue', 'green', 'white', 'orange', 'black'];
const getColor = (list, colors, a)=>{
    // 初始设定颜色的序号为0；
    let aIndex = 0;
    // list遍历的最大长度
    let maxLength = list.length + 1 <= colors.length ? list.length : colors.length - 1;
    list.forEach((item, index)=>{
        // 在最大长度内进行aIndex的比较赋值
        if(index + 1 <= maxLength){
            // 如果数字大于等于当前序号，则本次循环aIndex为index+1，否则为上次的赋值
            aIndex = item <= a ? index + 1 : aIndex;
        }
    })
    let color = colors[aIndex];
    console.log(aIndex, color)
    return color;
}

getColor(list_1, colors_1, 9);// 0, red
getColor(list_1, colors_1, 19);// 1, blue
getColor(list_1, colors_1, 40);// 3, white

getColor(list_2, colors_2, 10);// 1, blue
getColor(list_2, colors_2, 19);// 1, blue
getColor(list_2, colors_2, 40);// 3, white
getColor(list_2, colors_2, 60);// 3, white

getColor(list_3, colors_3, 14);// 1, blue
getColor(list_3, colors_3, 29);// 2, green
getColor(list_3, colors_3, 40);// 3, white

window.onbeforeunload = function(e){
    console.log('beforeunload');
    var msg = '关闭浏览器';
    e.returnValue = msg;
    console.log(e);
    return msg;
}
window.onclose = function(e){
    console.log('close');
}
window.onload = function(e){
    console.log('load');
}
window.onloadstart = function(e){
    console.log('loadstart');
}
window.onloadend = function(e){
    console.log('loadend');
}

</script>
</html>